(function() {
    var Snake = Class.create({
        constructor: function(ele) {
            this.ele = ele;
            this.dom = ele.get(0);
            this.init();
        },
        init: function() {
            var html = '<div class="box">' +
                '<img src="imgs/1.jpg" class="img1 active">' +
                '<img src="imgs/2.jpg" class="img2 left">' +
                '<img src="imgs/3.jpg" class="img3 right">' +
                '<i class="fa fa-chevron-left btn-left"></i>' +
                '<i class="fa fa-chevron-right btn-right"></i>' +
                '</div>'

            this.ele.append($(html));

            $(".btn-left").on("click", function(e) {
                var arr1 = $(".img1")[0].src.split(".");
                var indexArr1 = arr1[arr1.length - 2].split("/");
                var index1 = indexArr1[indexArr1.length - 1];
                console.log(index1);
                index1--;
                if (index1 < 1) {
                    index1 = 3;
                }
                $(".img1")[0].src = "imgs/" + index1 + ".jpg";

                var arr2 = $(".img2")[0].src.split(".");
                var indexArr2 = arr2[arr2.length - 2].split("/");
                var index2 = indexArr2[indexArr2.length - 1];
                console.log(index2);
                index2--;
                if (index2 < 1) {
                    index2 = 3;
                }
                $(".img2")[0].src = "imgs/" + index2 + ".jpg";

                var arr3 = $(".img3")[0].src.split(".");
                var indexArr3 = arr3[arr3.length - 2].split("/");
                var index3 = indexArr3[indexArr3.length - 1];
                console.log(index3);
                index3--;
                if (index3 < 1) {
                    index3 = 3;
                }
                $(".img3")[0].src = "imgs/" + index3 + ".jpg";
            })
            $(".btn-right").on("click", function(e) {
                var arr1 = $(".img1")[0].src.split(".");
                var indexArr1 = arr1[arr1.length - 2].split("/");
                var index1 = indexArr1[indexArr1.length - 1];
                console.log(index1);
                index1++;
                if (index1 > 3) {
                    index1 = 1;
                }
                $(".img1")[0].src = "imgs/" + index1 + ".jpg";

                var arr2 = $(".img2")[0].src.split(".");
                var indexArr2 = arr2[arr2.length - 2].split("/");
                var index2 = indexArr2[indexArr2.length - 1];
                console.log(index2);
                index2++;
                if (index2 > 3) {
                    index2 = 1;
                }
                $(".img2")[0].src = "imgs/" + index2 + ".jpg";

                var arr3 = $(".img3")[0].src.split(".");
                var indexArr3 = arr3[arr3.length - 2].split("/");
                var index3 = indexArr3[indexArr3.length - 1];
                console.log(index3);
                index3++;
                if (index3 > 3) {
                    index3 = 1;
                }
                $(".img3")[0].src = "imgs/" + index3 + ".jpg";
            })
        }
    });
    var plugin = function() {
        if (this.data("snake")) {
            return;
        }
        var snake = new Snake(this);
        this.data('snake', snake);
    }
    $.fn.snake = plugin;
})();